<template>
  <div>
    <a-modal v-model="visible" :closable="false">
        <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk" :disabled="okButtonDisable">
          请选择分类
        </a-button>
      </template>
      <a-directory-tree
        class="draggable-tree"
        :default-expanded-keys="expandedKeys"
        :tree-data="gData"
        show-icon
        defaultExpandAll
        multiple
        >
        <a-icon slot="switcherIcon" type="down" />
        <a-icon slot="file" type="file-text" />
        </a-directory-tree>
    </a-modal>
  </div>
</template>
<script>
export default {
    name:"claimModel",
  data() {
    return {
        loading: false,
        visible: false,
        okButtonDisable:true,
        gData:[
            {
                    title:"卡内限额信用贷款索引",
                    key:'0-0',
                    children: [
                        { title: 'leaf', key: '0-0-0', slots: { icon: 'file' },isLeaf:true },
                        { title: 'leaf1', key: '0-0-1', slots: { icon: 'file' },isLeaf:true },
                    ],
            },
            {
                title:"零售业务申请索引",
                key:'0-1',
                children:[
                    {
                        title:"零售业务申请",
                        key:"0-1-0",
                        children:[
                            {title:"身份证件",key:"0-1-0-0",isLeaf:true},
                            {title:"公积金资料",key:"0-1-0-1",isLeaf:true}
                        ]
                    }
                ]
            }
        ],
        expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],//默认选中的节点
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk() {
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less">
    .ant-modal-body .ant-tree,.ant-modal-body .ant-tree li .ant-tree-node-content-wrapper{
        color:#000;
    }
</style>
